<template>
  <div class="rightTop">
    <img class="topPic" src="../assets/rightBottom3.png" alt="" />
    <a-select
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      v-model="active"
      class="rightTopSelect"
      @select="select"
    >
      <a-select-option
        v-for="item in selectList"
        :key="item.value"
        :value="item.value"
        >{{ item.name }}</a-select-option
      >
    </a-select>
    <div class="nav">
      <img src="../assets/board.png" alt="" />
      <div class="num">{{ num }}</div>
      <img src="../assets/board3.png" alt="" />
      <div class="title">{{ name }}</div>
    </div>
    <div class="chart" @mouseleave="handleMouseLeave">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in data"
            :key="item.platformId"
            :data-name="item.platformId"
          >
            <flcz
              :key="item.platformId"
              :ref="String(item.platformId)"
              @clickBar="(p) => clickBar(p, item.platformId, true)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import flcz from "@/components/pages/flcz";
import { classifiedList } from "@/api/serve";

export default {
  name: "RightTop",
  props: {},
  components: {
    flcz,
  },
  data() {
    return {
      swiper: null,
      data: [],
      name: "市本级",
      num: 0,
      active: "",
      selectList: [],
      isClick: false,
      childName: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleMouseLeave() {
      console.log("鼠标移开");
      this.isClick = false;
    },
    middleEmpty() {
      if (this.isClick) {
        // 不切换
        const arr = this.data.find((item) => item.platformId == this.active);
        let a2;
        if (arr) {
          a2 =
            arr.appealMainClassCountMapList.find(
              (item) => item.name == this.childName
            ).jwb || [];
          this.$emit("clickBar", a2);
        }
      } else {
        console.log("切换");
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i].value == this.active) {
            console.log(this.selectList[i], 1);
            console.log(this.active, 2);
            if (this.selectList[i + 1]) {
              // this.active = this.selectList[i + 1].value;
              this.swiper.slideTo(i + 1);
              // this.$nextTick(() => {
              //   this.getCurrent();
              // });
              // const n = this.data.find((item) => item.platformId == this.active);
              // this.childName = n.appealMainClassCountMapList[0].name;
              // this.name = n.platformName.split('平台')[0];
              // this.num = n.allTotal;
              // this.$emit('clickBar', n.appealMainClassCountMapList[0].jwb || []);
              console.log("切换下一页传数据了");
            } else {
              this.swiper.slideTo(0);
            }
            break;
          }
        }
      }
    },
    clickBar(p, platformId, isClick = false) {
      console.log("clickBar");
      this.isClick = isClick;
      const arr = this.data.find((item) => item.platformId == platformId);
      let a2;
      this.childName = p.name;
      if (arr) {
        a2 =
          arr.appealMainClassCountMapList.find((item) => item.name == p.name)
            .jwb || [];
      }
      this.$emit("clickBar", a2);
    },
    goToSlide() {
      if (this.swiper) {
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i].value == this.active) {
            this.swiper.slideTo(i);
            break;
          }
        }
      }
    },
    select() {
      this.goToSlide();
    },
    setName(name) {
      // return name.split('服务')[0];
      return name;
    },
    init() {
      const t = this;
      classifiedList().then((res) => {
        const d = res.data.result;
        this.data = d;
        this.$nextTick(() => {
          this.data.forEach((item) => {
            this.selectList.push({
              name: item.platformName.split("平台")[0],
              value: item.platformId,
            });
            const arr = item.appealMainClassCountMapList.map((item2) => {
              return {
                name: this.setName(item2.name),
                value: item2.totalResultCount,
              };
            });
            const r = String(item.platformId);
            if (this.$refs[r]) {
              this.$refs[r][0].setData(arr);
            }
          });
          this.$nextTick(() => {
            this.swiper = new Swiper(".swiper", {
              touchStartPreventDefault: false, // 就是这个属性
              autoplay: false,
              // loop: true,
              pagination: false,
              observer: true,
              observeParents: true,
              loopAdditionalSlides: 2,
              on: {
                slideChangeTransitionEnd: function () {
                  console.log("slideChangeTransitionEnd");
                  t.getCurrent();
                },
              },
            });
            // this.swiper.el.onmouseover = function() {
            //   t.swiper.autoplay.stop();
            // };
            // this.swiper.el.onmouseout = function() {
            //   t.swiper.autoplay.start();
            // };
            this.getCurrent();
          });
        });
      });
    },
    getCurrent() {
      const dom = document.querySelectorAll(".swiper-slide-active")[0];
      if (dom) {
        const name = dom.getAttribute("data-name");
        const n = this.data.find((item) => item.platformId == name);
        this.active = n.platformId;
        this.clickBar(
          { name: n.appealMainClassCountMapList[0].name },
          name,
          false
        );
        if (n) {
          this.name = n.platformName.split("平台")[0];
          this.num = n.allTotal;
        }
      }
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    setTimeout(() => {
      this.init();
    }, 2000);
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.rightTop {
  position: relative;

  .swiper {
    // position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .nav {
    position: relative;
    .num {
      position: absolute;
      left: 314px;
      top: 0;
      bottom: 0;
      font-family: YouSheBiaoTiHei;
      font-size: 36px;
      color: #01fffe;
      line-height: 47px;
    }
    .title {
      position: absolute;
      font-family: YouSheBiaoTiHei;
      font-size: 30px;
      color: #ffffff;
      line-height: 47px;
      background: linear-gradient(to bottom, #fff, #65d0ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      top: 0;
      bottom: 0;
      left: 200px;
    }
  }
  .chart {
    width: 100%;
    height: 290px;
    padding-bottom: 24px;
  }
}
</style>
<style lang="less">
.rightTopSelect {
  width: 160px;
  height: 38px;
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 20px;
}
.rightTop {
  .ant-select-dropdown-content {
    border: 0 !important;
  }
  .ant-select-dropdown-menu {
    background: rgba(39, 61, 118, 1) !important;
  }
  .ant-select-dropdown-menu-item-active {
    background: linear-gradient(180deg, #4796d9 0%, #225db1 100%) !important;
  }
  .ant-select-dropdown {
    width: 160px;
    top: 37px !important;
    left: auto !important;
    right: 10px !important;

    .ant-select-dropdown-menu-item {
      border-bottom: 1px solid rgba(143, 179, 255, 0.16);
      background: #273d76;
      text-align: left;
      font-size: 18px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
}
</style>
